require('./css/index.scss')
const template = `
<div class="modal modal__wrap" v-show="show">
    <div class="modal__main">
        <div class="modal__main__content">
            <div class="modal__main__content__title">{{title}}</div>
            <div class="modal__main__content__text" v-html="content">
                <slot></slot>
            </div>
        </div>
        <div class="modal__main__footer">
            <div class="modal__main__footer__btn--cancel modal__main__footer__btn" @click.stop="cancel"
                v-show="cancelText ? true :false">{{cancelText?cancelText:'Cancel'}}</div>
            <div class="modal__main__footer__btn--confirm modal__main__footer__btn" :class="{first:!cancelText}"
                @click.stop="confirm" v-show="confirmText ? true :false">
                {{confirmText?confirmText:'Continue'}}</div>
        </div>
        <div class='modal__main__close' v-show='canCloseModal' @click.stop='cancel'><span class='close-icon'></span>
        </div>
    </div>
    <div class="modal__bg"></div>
</div>
`
let modalVM = null
export default {
  install(Vue, options) {
    const opt = {
      title: '注意',
      content: '',
      cancelText: 'Cancel',
      confirmText: 'Continue',
      canCloseModal: true
    }
    Object.assign(opt, options)
    Vue.prototype.$modal = function(config) {
      const options = JSON.parse(JSON.stringify(opt))
      Object.assign(options, config)
      const {
        cancelBefore,
        cancelCallback,
        confirmBefore,
        confirmCallback,
        canClose = true
      } = options
      function confirm() {
        if (
          confirmBefore &&
                    typeof confirmBefore === 'function'
        ) {
          const res = confirmBefore()
          if (!res) return false
        }
        canClose && this.close()
        if (
          confirmCallback &&
                    typeof confirmCallback === 'function'
        ) {
          confirmCallback()
        }
        return false
      }
      function cancel() {
        if (
          cancelBefore &&
                    typeof cancelBefore === 'function'
        ) {
          const res = cancelBefore()
          if (!res) return false
        }
        canClose && this.close()
        if (
          cancelCallback &&
                    typeof cancelCallback === 'function'
        ) {
          cancelCallback()
        }
        return false
      }
      if (!modalVM) {
        const ModalTpl = Vue.extend({
          data() {
            return {
              show: false,
              title: '',
              content: options.content,
              cancelText: options.cancelText,
              confirmText: options.confirmText,
              canCloseModal: options.canCloseModal,
              wordWrap: '', // delete
              type: '' // delete
            }
          },
          methods: {
            confirm() {
              if (
                confirmBefore &&
                                typeof confirmBefore === 'function'
              ) {
                const res = confirmBefore()
                if (!res) return false
              }
              this.close()
              if (
                confirmCallback &&
                                typeof confirmCallback === 'function'
              ) {
                confirmCallback()
              }
              return false
            },
            cancel() {
              if (
                cancelBefore &&
                                typeof cancelBefore === 'function'
              ) {
                const res = cancelBefore()
                if (!res) return false
              }
              this.close()
              if (
                cancelCallback &&
                                typeof cancelCallback === 'function'
              ) {
                cancelCallback()
              }
              return false
            },
            close() {
              this.show = false
              return this.show
            }
          },
          template
        })
        modalVM = new ModalTpl()
        const vm = modalVM.$mount().$el
        document.body.appendChild(vm)
      }
      modalVM.title = options.title
      modalVM.content = options.content
      modalVM.cancelText = options.cancelText
      modalVM.confirmText = options.confirmText
      modalVM.confirm = confirm
      modalVM.cancel = cancel
      modalVM.show = true
    }
  }
}
